<template>
    <fragment>
        <div
            v-for="(item, index) in optionLists"
            class="option-list-item"
            :key="index"
            @click="handleSetting(item.handle)"
        >
            <Icon :type="item.type" :color="item.color" :size="item.size" />
            <transition name="fade">
                <div class="setting-wrapper" v-if="showSettingMenu" @click.stop="closeSettingMenu">
                    <div class="setting-wrapper-inner">
                        <ul class="setting-view" @mouseleave="mouseEnterItem(-1)">
                            <li
                                :class="[
                                    'setting-view-item',
                                    settingItemHeightLightIndex === index ? 'item-height-light' : ''
                                ]"
                                @click="handleSetting(item.handle)"
                                @mouseenter="mouseEnterItem(index)"
                                v-for="(item, index) in settingList"
                                :key="index"
                                >{{ item.label }}</li
                            >
                        </ul>
                    </div>
                </div>
            </transition>
        </div>
    </fragment>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import { OptionList } from './types';
    import { IntrinsicElements } from '@/appTypes';

    @Component({
        components: {}
    })
    export default class Options extends Vue<IntrinsicElements> {
        optionLists: OptionList[] = [
            {
                type: 'md-settings',
                color: 'inherit',
                size: '24',
                handle: 'openSettingMenu'
            }
        ];
        settingList = [
            {
                label: '重置',
                icon: '',
                handle: 'reset'
            }
        ];
        showSettingMenu = false;
        settingItemHeightLightIndex = -1;
        public openSettingMenu(): void {
            this.showSettingMenu = true;
        }

        public closeSettingMenu(): void {
            this.showSettingMenu = false;
        }
        public mouseEnterItem(index: number): void {
            this.settingItemHeightLightIndex = index;
        }
        public handleSetting(handle: string): void {
            this[handle]();
        }
        public reset(): void {
            const { $router } = this;
            $router.replace('/initialize');
        }
    }
</script>

<style scoped lang="less" src="./options.less"></style>
